<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="infoForm.userName"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入用户名"
      />
      <el-input
        v-model="infoForm.id"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入学号"
      />
      <el-select
        v-model="infoForm.sex"
        placeholder="请选择性别"
        class="filter-item"
      >
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
      <el-input
        v-model="infoForm.bookName"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="书名"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="getList(1)"
      >查找</el-button>
      <el-button
        v-show="buttonShow"
        class="filter-item"
        type="primary"
        icon="el-icon-arrow-down"
        @click="bshow"
      >更多搜索</el-button>
      <el-button
        v-show="!buttonShow"
        class="filter-item"
        type="primary"
        icon="el-icon-arrow-up"
        @click="bshow"
      >收起搜索</el-button>
<!--      <el-checkbox-group-->
<!--        v-model="infoForm.time"-->
<!--        class="filter-item"-->
<!--        size="small"-->
<!--        @change="getList(1)"-->
<!--        >-->
<!--        <el-checkbox-button-->
<!--          v-for="time in times"-->
<!--          :label="time"-->
<!--          :key="time"-->
<!--        >{{time}}</el-checkbox-button>-->
<!--      </el-checkbox-group>-->
      <el-radio-group
        :fill="radioColor"
        v-model="infoForm.time"
        class="filter-item">
        <el-radio-button :label="0" >未还书</el-radio-button>
        <el-radio-button :label="1" >按时还书</el-radio-button>
        <el-radio-button :label="2" >超时还书</el-radio-button>
      </el-radio-group>
      <br>
      <el-date-picker
        v-show="inputShow"
        v-model="infoForm.startTime"
        type="date"
        class="filter-item"
        style="width: 200px;"
        placeholder="借书时间">
      </el-date-picker>
      <el-date-picker
        v-show="inputShow"
        v-model="infoForm.endTime"
        type="date"
        class="filter-item"
        style="width: 200px;"
        placeholder="最暗还书时间">
      </el-date-picker>
      <el-date-picker
        v-show="inputShow"
        v-model="infoForm.returnTime"
        type="date"
        class="filter-item"
        style="width: 200px;"
        placeholder="实际还书时间">
      </el-date-picker>
      <el-input
        v-show="inputShow"
        v-model="infoForm.college"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="所在学院"
      />
      <el-input
        v-show="inputShow"
        v-model="infoForm.grade"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="所在年级"
      />
      <el-input
        v-show="inputShow"
        v-model="infoForm.class"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="所在班级"
      />
    </div>
    <!-- 查询结果 -->
    <div >
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="正在查询中。。。"
        :height="tabHeight"
        fit
        highlight-current-row
      >
        <el-table-column align="center" width="200px" label="学号" prop="id"/>
        <el-table-column align="center" width="100px" label="姓名" prop="userName" sortable />
        <el-table-column align="center" width="50px" label="性别" prop="sex"/>
        <el-table-column align="center" width="200px" label="书名" prop="bookName"/>
        <el-table-column align="center" width="250px" label="借书时间" prop="startTime"/>
        <el-table-column align="center" width="250px" label="最暗还书时间" prop="endTime"/>
        <el-table-column align="center" width="250px" label="实际还书时间" prop="returnTime"/>
        <el-table-column align="center" width="200px" label="所在学院" prop="college"/>
        <el-table-column align="center" width="100px" label="所在年级" prop="grade"/>
        <el-table-column align="center" width="200px" label="所属专业" prop="specialized"/>
        <el-table-column align="center" width="100px" label="所在班级" prop="classNum"/>
      </el-table>
    </div>
    <!-- 分页角标-->
    <div class="fypage">
      <el-pagination
        v-show="total>0"
        :total="total"
        :page="pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
    export default {
        name: "borrow",
        data(){
            return{
                infoForm: {
                    id:'',
                    userName: '',
                    sex: '',
                    startTime: '',
                    endTime: '',
                    returnTime: '',
                    college: '',
                    grade: '',
                    classNum: 0,
                    time: 0,
                    bookName: '',
                    specialized:'',
                },
                total: 1,
                pageNum: 1,
                pageSize: 15,
                orderBy: '',
                sort: '',
                list:[],
                listLoading: false,
                tabHeight: 540,
                inputShow: false,
                buttonShow: true,
                radioColor: '#f2b400'

            }
        },
        created() {

            this.getList(1)
        },
        watch:{
            'infoForm.time'(){
                if(this.infoForm.time == 0){
                    this.radioColor = '#f2b400'
                }else if(this.infoForm.time == 1){
                    this.radioColor = '#6df20b'
                }else {
                    this.radioColor = '#f20d00'
                }
                this.getList(1)
            }
        },
        methods: {

            bshow(){
                this.buttonShow = this.buttonShow == false ? true : false
                this.inputShow = this.inputShow == false ? true : false
                this.tabHeight = this.inputShow == true ? 490 : 540
            },

            handleSizeChange(size){
                this.getList()
            },
            handleCurrentChange(current){
                this.getList(current)
            },

            //当前页数，排序字段，排序方式
            getList(page,order,sortord){
                const self = this
                self.listLoading = true
                self.pageNum = page
                self.orderBy = order
                self.sort = sortord
                let data = {
                    'id': self.infoForm.id || 0, //学号
                    'userName': self.infoForm.userName || null, //姓名
                    'sex': self.infoForm.sex || null, //性别
                    'bookName': self.infoForm.bookName || null, //书名
                    'startTime': self.infoForm.startTime || null, //借书时间
                    'endTime': self.infoForm.endTime || null, //最暗还书时间
                    'returnTime': self.infoForm.returnTime || null, //实际还书时间
                    'college': self.infoForm.college || null, //所在学院
                    'grade': self.infoForm.grade || null, //所在年级
                    'specialized': self.infoForm.specialized || null, //所属专业
                    'classNum': self.infoForm.classNum, //所在班级
                    'timeState': self.infoForm.time, //借书状态 0：未归还 1：按时归还 2：超时归还

                    'orderBy': self.orderBy || null, //排序字段
                    'pageNum': self.pageNum || 1, //当前页数
                    'pageSize': self.pageSize || 15, //每页展示条数
                    'sort': self.sort || null, //排序方式
                }
                self.$axios.post('/manage/borrow/list',data).then(res =>{
                    try {
                        self.list = res.data.data
                        self.total = res.data.total
                        self.listLoading = false
                    }catch(err){
                        self.listLoading = false
                        self.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    self.$message.error("查询出错！！！！！")
                    self.listLoading = false
                })
            },
        }
    }
</script>

<style scoped>

</style>
